<template>
  <!-- 差旅费报销详情页 -->
  <div>
    <div v-if="confirmLoading" class="zhezhao" style="text-align: center">
      <a-spin />
    </div>
    <a-modal
      style="top: 25px"
      :visible="visible"
      :confirm-loading="confirmLoading"
      title="差旅费报销"
      @cancel="handleCancel"
      :dialogStyle="{left:(!flag?'80px':''),top:'10px'}"
      :maskClosable="false"
    >
      <a-form :form="form" layout="horizontal" labelAlign="left">
        <a-divider orientation="left">单程</a-divider>
        <a-form-item label="出发时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            style="width: 100%"
            format="YYYY-MM-DD"
            :inputReadOnly="dateReadOnly"
            :disabled="disabledType"
            v-decorator="['gcfsj', { rules: [{ type: 'object',required: true, message: '请填写出发时间' }] }]"
          />
        </a-form-item>
        <a-form-item label="出发城市" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            :disabled="disabledType"
            v-decorator="['gcfd', { rules: [{ required: true,message: '请填写出发城市' },{ max:20,message:'长度不能超过20个字'}] }]"
          />
        </a-form-item>
        <a-form-item label="目的城市" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            :disabled="disabledType"
            v-decorator="['gmdd', { rules: [{ required: true, message: '请填写目的城市' },{ max:20,message:'长度不能超过20个字'}] }]"
          />
        </a-form-item>
        <a-form-item label="交通方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            :disabled="disabledType"
            v-decorator="['gcxfs', { rules: [{ required: true, message: '请填写交通方式' }] }]"
          >
            <a-select-option value="1">火车及动车</a-select-option>
            <a-select-option value="2">火车及动车一等座</a-select-option>
            <a-select-option value="3">飞机</a-select-option>
            <a-select-option value="4">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="交通费用" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            :disabled="disabledType"
            style="width:100%"
            :min="0"
            :max="99999"
            :precision="2"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            v-decorator="['gjtf', { rules: [{required: true, message: '请填写交通费用'}] }]"
          />
        </a-form-item>
        <!-- <a-divider orientation="left">返程</a-divider>
        <a-form-item label="返程时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            :disabled="disabledType"
            style="width: 100%"
            format="YYYY-MM-DD"
            :inputReadOnly="dateReadOnly"
            v-decorator="['bcfsj', { rules: [{ required: true, message: '请填写返程时间' }] }]"
          />
        </a-form-item>
        <a-form-item label="出发地" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            :disabled="disabledType"
            v-decorator="['bcfd', { rules: [{ required: true, message: '请填写出发地' },{ max:20,message:'长度不能超过20个字'}] }]"
          />
        </a-form-item>
        <a-form-item label="目的地" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            :disabled="disabledType"
            v-decorator="['bmdd', { rules: [{ required: true, message: '请填写目的地' },{ max:20,message:'长度不能超过20个字'}] }]"
          />
        </a-form-item>
        <a-form-item label="交通方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            :disabled="disabledType"
            v-decorator="['bcxfs', { rules: [{ required: true, message: '请填写交通方式' }] }]"
          >
            <a-select-option value="1">火车及动车</a-select-option>
            <a-select-option value="2">火车及动车一等座</a-select-option>
            <a-select-option value="3">飞机</a-select-option>
            <a-select-option value="4">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="交通费用" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            :disabled="disabledType"
            style="width:100%"
            :min="0"
            :max="99999"
            :precision="2"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            v-decorator="['bjtf', { rules: [{required: true, message: '请填写交通费用'}] }]"
          />
        </a-form-item> -->
        <a-divider orientation="left">住宿</a-divider>
        <a-form-item label="住宿方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            :disabled="disabledType"
            v-decorator="['zsfs', { rules: [{ required: true, message: '请填写住宿方式' }] }]"
          >
            <a-select-option value="1">宾馆</a-select-option>
            <a-select-option value="2">宿舍</a-select-option>
            <a-select-option value="3">招待</a-select-option>
            <a-select-option value="4">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="住宿天数" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            :disabled="disabledType"
            style="width: 100%"
            v-decorator="['zsts']"
          />
        </a-form-item>
        <a-form-item label="住宿人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            :disabled="disabledType"
            style="width: 100%"
            v-decorator="['zsrs']"
          />
        </a-form-item>
        <a-form-item label="住宿金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            :disabled="disabledType"
            style="width:100%"
            :min="0"
            :max="99999"
            :precision="2"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            v-decorator="['zsje']"
          />
        </a-form-item>
        <a-divider orientation="left">补助</a-divider>
        <a-form-item label="出差补助" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            :disabled="disabledType"
            style="width:100%"
            :min="0"
            :max="99999"
            :precision="2"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            v-decorator="['ccbz']"
          />
        </a-form-item>
        <a-form-item label="住宿补助" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            :disabled="disabledType"
            style="width:100%"
            :min="0"
            :max="99999"
            :precision="2"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            v-decorator="['zsbz']"
          />
        </a-form-item>
        <a-divider orientation="left">其他</a-divider>
        <a-form-item label="其他费用" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            :disabled="disabledType"
            style="width:100%"
            :min="0"
            :max="99999"
            :precision="2"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            v-decorator="['qtfy']"
          />
        </a-form-item>
        <a-form-item label="其他费用说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea :disabled="disabledType" v-decorator="['qtfysm']" allowClear />
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea :disabled="disabledType" v-decorator="['bz']" allowClear />
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button
          :disabled="buttonLoading"
          htmlType="submit"
          type="primary"
          v-if="mode ==='edit'"
          @click="handleSubmit"
        >保存</a-button>
        <a-button v-if="!disabledType" style="background-color:#c8c9cc;border-color: #c8c9cc" @click="handleCancel">取消</a-button>
        <a-button v-else style="background-color:#c8c9cc;border-color: #c8c9cc" @click="handleCancel">返回</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { method } from '@/api/admin'
import pick from 'lodash.pick'
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      // 响应式布局
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      form: this.$form.createForm(this),
      operate: '',
      mode: '',
      visible: false,
      confirmLoading: false,
      disabledType: false,
      dateReadOnly: true,
      buttonLoading: false,
      flag: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
    }
  },
  created () {
    // const u = navigator.userAgent
    // // ios页面输入框失焦要页面重置到顶部
    // if (u.match(/\(i[^]+( U)? CPU.+Mac OS X/)) { // 判断是否是ios端
    //   let aflag = false
    //   let pageBackNormFunc
    //   document.body.addEventListener('focusin', () => {
    //     // 软键盘弹起事件
    //     aflag = true
    //     pageBackNormFunc && clearTimeout(pageBackNormFunc)
    //   })
    //   document.body.addEventListener('focusout', () => {
    //     // 软键盘关闭事件
    //     if (aflag) {
    //       pageBackNormFunc = setTimeout(function () { // // 当键盘收起的时候让页面回到原始位置
    //         window.scrollTo({ top: 0, behavior: 'smooth' })
    //       }, 200)
    //     }
    //     aflag = false
    //   })
    // }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    /**
     * 打开弹出框
     */
    openModel (record, operate, readonlyType) {
      this.buttonLoading = false
      // 报销查询/报销填报
      this.disabledType = readonlyType
      this.mode = this.$route.query.mode
      this.record = record
      // 新增/修改
      this.operate = operate
      this.initForm(record)

      this.visible = true
    },
    /**
     * 表单初始化
     */
    initForm (record) {
      if (this.operate === 'edit') {
        const formData = pick(record, [
          'gcfsj',
          'gcfd',
          'gcxfs',
          'gjtf',
          'gmdd',
          // 'bcfsj',
          // 'bcfd',
          // 'bcxfs',
          // 'bjtf',
          // 'bmdd',
          'bz',
          'qtfy',
          'qtfysm',
          'zsbz',
          'zsfs',
          'zsrs',
          'zsts',
          'ccbz',
          'zsje'
        ])
        const dateFormat = 'YYYY-MM-DD'
        formData.gcfsj = moment(formData.gcfsj, dateFormat)
        // formData.bcfsj = moment(formData.bcfsj, dateFormat)
        this.$nextTick(() => {
          this.form.setFieldsValue(formData)
        })
      } else {
        this.form.resetFields()
      }
    },
    /**
     * 提交表单
     */
    handleSubmit (e) {
      // e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.save(values)
        } else {
          this.$notification['info']({
            message: '请将信息填写完整',
            duration: 4
          })
        }
      })
    },
    /**
     * 保存
     */
    save (values) {
      this.confirmLoading = true
      this.buttonLoading = true
      values.id = this.record.id
      values.gcfsj = moment(values.gcfsj, 'YYYY-MM-DD HH:mm:ss').valueOf()
      // values.bcfsj = moment(values.bcfsj, 'YYYY-MM-DD HH:mm:ss').valueOf()
      values.staffId = this.userInfo.id
      if (
        this.$route.query.bxdh !== undefined &&
        this.$route.query.bxdh !== null &&
        this.$route.query.bxdh !== ''
      ) {
        values.bxdh = this.$route.query.bxdh
      }
      let url = ''
      let action = ''
      if (this.operate === 'add') {
        url = '/wb/ribs/insertClf'
        action = 'POST'
      } else {
        url = '/wb/ribs/updClf'
        action = 'PUT'
      }
      const actionParam = {
        // 请求参数
        url: url,
        action: action,
        parameter: {},
        data: Object.assign({}, values),
        message: '保存成功'
      }
      method(actionParam).then(res => {
        this.handleCancel()
        this.$emit('close')
        this.visible = false
        this.confirmLoading = false
      })
    },
    /**
     * 返回
     */
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
#contain {
  height: 700px;
  margin: -30px 10px 0px;
  border-radius: 5px;
  padding: 10px 50px 200px 30px;
  text-align: center;
  background-color: #ffffff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.form-item {
  position: relative; /*脱离文档流*/
  top: 50%; /*偏移*/
}
.zhezhao {
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  padding-top: 300px;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
}
</style>
